<template>
	<view>
		<view class="pad-16r doctor-bg">
			<view class="between border-bottom">
				<view class=" flex-1 align-between">
					<view class="mar-0-5 flex-start baseline">
						<view class="doctor-name">
							<view>{{doctorItem.name}}</view>
						</view>
						<view class="pad-0-10 flex-start">
							<view class="flex-start  color-gray mar-0-5">
								<view>
									<u-icon v-if="isLikes" name="star-fill" @click="handleLikesIsLike"></u-icon>
									<u-icon v-else name="star" @click="handleLikesIsLike"></u-icon>
								</view>
								<view class="mar-0-5">{{doctorItem.likesNum}}</view>
							</view>
							<view class="flex-start color-gray mar-0-10" @click="handleShare">
								<view><u-icon name="share"></u-icon></view>
								<view class="mar-0-5">{{doctorItem.forwardsNum}}</view>
							</view>
						</view>
					</view>
					<view class="color-gray  mar-0-5">
						<view>{{doctorItem.jobTitle}}</view>
					</view>
					<view class="tabs-doctor">
						<view v-for="(item,index) in tabsDoctor">
							<view class="tab">{{item}}</view>
						</view>
					</view>
					<view class="mar-0-5 color-gray flex-start" v-if="doctorItem.serviceNum">
						<view>服务患者：</view>
						<view class="service-num">{{doctorItem.serviceNum}}</view>
					</view>
				</view>
				<view class="img">
					<image v-if="doctorItem.headImg" :src="hostApi+doctorItem.headImg"></image>
					<image v-else src="/static/images/hospital/defaultDoctor.png"></image>
				</view>
			</view>
			<view class="shangchang-panel mar-5" v-show="doctorItem.specialty">
				<label :class="showAll?'show-all':'shanchangcontent'">
					<label class="shanchang">擅长 </label>
					<text class="specialty">{{doctorItem.specialty}}</text>
				</label>
				<label class="shanchang" v-if="showAll" @click="handleShowAll">收起</label>
				<label class="shanchang-open" v-else @click="handleShowAll">...全部 > </label>
			</view>
		</view>
		<view class="pad-16r bg-white">
			<!-- <u-sticky> -->
			<!-- 吸顶 -->
			<!-- 只能有一个根元素 -->
			<!-- <view class="sticky" offset-top="-100"> -->
			<!-- <u-tabs class="color-green" :bold="false" :list="listBar" ref="tabs" active-color="#41CFE6"
						inactive-color="#606266" :is-scroll="false" :current="current" @change="clickBar"></u-tabs> -->

			<!-- </view> -->
			<!-- </u-sticky> -->
			<TabVue :list="listBar" :current="current" @handleChange="clickBar"></TabVue>
		</view>
		<view class="mar-5-0 bg-white">
			<view v-if="current==0">
				<view class="bg-white pad-16r">
					<DateList v-if="allPbDate" :dateNum="dateNum" :canAva="allPbDate" @change='onDate'>
					</DateList>
					<view>
						<view class="title" v-if="listTimeAreaNum!=0">
							<view class="group-title">
								<view>
									<view class="group-name">选择预约时间</view>
									<view class="center">
										<view class="group-bg"></view>
									</view>
								</view>
							</view>
						</view>
						<view class="title" v-else>
							<view class="group-title">
								<view>
									<view class="group-name">当前日期无号</view>
									<view class="center">
										<view class="group-bg"></view>
									</view>
								</view>
							</view>
						</view>

						<view>
							<!-- <u-tabs-swiper ref="tabs" :list="listTimeArea" :is-scroll="false" :current="currentTabs"
								@change="changeTimeArea">
							</u-tabs-swiper> -->
							<TabButtonVue :list="listTimeArea" :current="currentTabs" @click="changeTimeArea">
							</TabButtonVue>
							<view class="time-area-num">
								<view v-for="(item,index) in listTimeAreaNum" class=" text-center mar-5"
									@click="clickTimeAreaNum(item)"
									:class="(item.active?'active':'')+' '+ (item.num==0 ||item.past?'no-num':'have-num') ">
									<view>
										<view>{{item.area}}</view>
										<view>余号：{{item.num}}</view>
										<view>￥{{item.totalMoney}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="center mar-5-0" v-if="listTimeAreaNum.length!=0"><u-button type="primary"
						class="btn-register" @click="patientHadReserve">确认</u-button>
				</view>
			</view>
			<view v-if="current==1">
				<OnlineConsultationVue v-if="doctorItem" :doctorItem="doctorItem"></OnlineConsultationVue>
			</view>
			<view v-if="current==2" class="pad-16r bg-white">
				<u-parse v-if="doctorItem.introduction" :html="doctorItem.introduction"
					:show-with-animation="true"></u-parse>
				<view v-else>当前医生暂没有介绍</view>
			</view>
			<view v-if="current==3" class="pad-16r bg-white">
				<doctorScienceInfoVue :doctorCode="doctorItem.code"></doctorScienceInfoVue>
			</view>
		</view>
		<u-modal v-model="show" :content-style="contentStyle" :show-title="false" :show-confirm-button="false"
			:mask-close-able="true">
			<view class="erweima">
				<view class="center head-img">
					<view class="img">
						<image v-if="doctorItem.headImg" :src="hostApi+doctorItem.headImg"></image>
						<image v-else src="/static/images/hospital/defaultDoctor.png"></image>
					</view>
				</view>
				<view class="center baseline mar-0-5">
					<view class="font-size-20 font-weight">{{doctorItem.name}}</view>
					<view class="mar-0-5">{{doctorItem.jobTitle}}</view>
				</view>
				<view class="center">
					<view class="between  ">
						<view class="text-center mar-5" v-if="doctorItem.serviceNum">
							<view>{{doctorItem.serviceNum}}</view>
							<view class="color-gray">服务患者</view>
						</view>
						<view class="text-center mar-5" v-if="doctorItem.forwardsNum">
							<view>{{doctorItem.forwardsNum}}</view>
							<view class="color-gray">转发数</view>
						</view>
						<view class="text-center mar-5" v-if="doctorItem.likesNum">
							<view>{{doctorItem.likesNum}}</view>
							<view class="color-gray">关注数</view>
						</view>
					</view>
				</view>
				<view class="border-row"></view>
				<view class="mar-10">
					<tkiQrcodeVue ref="qrcode" onval :val="erweimaVal" :size="200" :load-make="true"
						:show-loading="false" />
				</view>
				<view class="text-center">扫码查看医生详情</view>
			</view>
		</u-modal>
		<Dialog :show="showDialog" @confirm="confirm" @close="close" title="温馨提示" :mask-close-able="true"
			btn-confirm="继续" btn-cancel="新预约">
			<view class="slot-content">
				<view>当前已预约挂号，是否继续？</view>
				<view>科室：{{hadReserveItem.deptName}}</view>
				<view>医生：{{hadReserveItem.doctorName}}</view>
				<view>地址：{{hadReserveItem.visitAaddress}}</view>
				<view>时间：{{hadReserveItem.regTime}} {{hadReserveItem.sortNoTime}}</view>
			</view>
		</Dialog>
		<u-toast ref="uToast" />
		<LoadVue :load="load"></LoadVue>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import OnlineConsultationVue from '../../components/online/OnlineConsultation.vue';
	import DateList from "@/components/DateList/index.vue"
	import doctorScienceInfoVue from './doctorScienceInfo.vue';
	import Dialog from '../../components/Dialog/Dialog.vue';
	import TabVue from '../../components/Tabs/Tab.vue';
	import TabButtonVue from '../../components/Tabs/TabButton.vue';
	import {
		schedulingAreaTime,
		doctorScheduling,
		doctorSelect,
		doctorNumByCode,
		doctorLockNo,
		doctorReserveRegister,
		doctorPatientHadReserve,
		doctorReserveCancel
	} from "../../api/doctor.js"
	import {
		doctorLikesSelect,
		doctorLikesAdd
	} from '../../api/doctorLikes';
	import {
		listSitType
	} from '../../utils/listSitType'
	var dayjs = require('dayjs')
	import {
		getWeekAndDay
	} from '../../common/js/common.js'
	import {
		reserveLock
	} from '../../api/reserve';
	import tkiQrcodeVue from '../../components/QrCode/tki-qrcode.vue';
	import {
		dictionarySelect
	} from '../../api/dictionary';
	import {
		dateDefault,
		dateFormat,
		getSecondBetweenDates
	} from '../../utils/assist';
	export default {
		components: {
			doctorScienceInfoVue,
			DateList,
			OnlineConsultationVue,
			tkiQrcodeVue,
			Dialog,
			TabVue,
			TabButtonVue
		},
		data() {
			return {
				doctorItem: '',
				listScheduling: [],
				allPbDate: null,
				showMore: false,
				listBar: [{
						name: '就诊服务',
					},
					{
						name: '在线问诊',
					},
					{
						name: '医生介绍',
					},
					{
						name: '科普资讯',
					}
				],
				current: 0, //默认选择第几个tab
				currentTabs: 0,
				startDate: "",
				endDate: "",
				schNo: "", //排班ID
				schId: '', //排班明细
				totalMoney: 0, //挂号金额
				listTimeArea: [], //排班坐诊类型  上午中午下午等
				listTimeAreaNum: [], //数量
				currentScheduling: '', //当前排队信息
				currentItem: null, //当前选择预约的时间段
				currentSitType: '', //默认正确的坐诊类型
				listCurrent: [], //当前时间段的所有数据
				showAll: false,
				doctorCode: '',
				isLikes: false, //没有被关注
				show: false,
				contentStyle: {
					"backgroundColor": "transparent"
				},
				erweimaVal: '',
				tabsDoctor: ["态度热情", "专业性强", "耐心解答"],
				showDialog: false,
				hadReserveItem: '', //已预约数据
				reserveRegisterData: '', //预约挂号数据
				load: false,
			}
		},
		computed: {
			...mapGetters(["userId", 'hostApi', "userInfo", "currentHospitalInfo"])
		},
		onLoad(e) {
			let doctorCurrent = uni.getStorageSync("doctorCurrent")
			this.current = doctorCurrent ? parseInt(doctorCurrent) : 0
			uni.setStorageSync("doctorCurrent", 0)
			this.doctorCode = e.code;
			this.initDoctor();
			this.initDoctorLike();
			this.init()
		},
		mounted() {

		},
		methods: {
			// 初始化查询医生信息
			initDoctor() {
				doctorSelect({
					code: this.doctorCode
				}).then(res => {
					if (res.length > 0) {
						this.doctorItem = res[0]
					}
				})
			},
			initDoctorLike() {
				doctorLikesSelect({
					doctorCode: this.doctorCode,
					patId: this.userInfo.patId
				}).then(res => {
					if (res.length > 0) {
						this.isLikes = res[0].likesStatus == 1;
					} else {
						this.isLikes = false;
					}
				})
			},
			// 得到当前医生排班，用于日期显示
			getDoctorScheduling() {
				this.load = true;
				let params = {
					queryType: 0,
					doctorCode: this.doctorCode,
					endDate: this.endDate,
					beginDate: this.startDate,
				}
				// 查询医生排班：用于日期排班显示
				doctorNumByCode(params).then(res => {
					console.log(res)
					this.listScheduling = res;
					this.getAllPbDate(this.listScheduling)
				}).finally(() => {
					this.load = false;
				})
			},
			init() {
				dictionarySelect({
					code: 'canReserveDays'
				}).then(res => {
					if (res.length > 0) {
						this.dateNum = parseInt(res[0].describe)
					}
					this.endDate = dayjs().add(this.dateNum, 'day').format('YYYY-MM-DD')
					this.startDate = dayjs().format('YYYY-MM-DD')
					this.getDoctorScheduling()
				})
			},

			// 得到数组里面的所有日期有号源的信息日期
			getAllPbDate(list) {
				let obj = {};
				for (let i = 0; i < list.length; i++) {
					if (!obj[list[i].scheduleDate]) {
						obj[list[i].scheduleDate] = 1
					} else {
						obj[list[i].scheduleDate] = obj[list[i].scheduleDate] + 1
					}
				}
				this.allPbDate = obj
			},

			// 点击问诊挂号，在线问诊，医生介绍和科普资讯按钮
			clickBar(e) {
				this.current = e;
			},
			// 点击上下午按钮
			changeTimeArea(e) {
				console.log(e)
				this.currentTabs = e;
				this.currentItem = null;
				this.currentSitType = this.listTimeArea[e].type
				this.currentScheduling = this.listTimeArea[this.currentTabs].item
				this.setTimeAreaNum()
			},
			// 选中每个预约时间段
			clickTimeAreaNum(item) {
				if (item.waitRegisterTotal == 0) {
					this.$refs.uToast.show({
						title: '没有号源',
						type: 'warning',
					})
					return;
				}
				if (item.past) {
					this.$refs.uToast.show({
						title: '号源已过',
						type: 'warning',
					})
					return
				}
				// 将其他所有边框清空，在设置当前的为选中状态
				this.listTimeAreaNum.forEach(res => {
					res.active = false;
				})
				item.active = true;
				this.currentItem = item
			},
			// 点击日期选中预约
			onDate(val) {
				this.startDate = val.startDate
				this.endDate = val.endDate
				this.listTimeArea = []
				this.listTimeAreaNum = []
				if (this.listScheduling.length > 0) {
					this.listScheduling.forEach(res => {
						if (res.scheduleDate == val.startDate) {
							// this.currentScheduling = res; //当前日期下的排班信息
							this.getSchedulingAreaTime()
							return res
						}
					})
				}
			},
			// 显示上下午和号源
			getSchedulingAreaTime() {
				this.setTimeArea();
				// 默认得到时间段的第一个
				this.changeTimeArea(0);
			},
			// 设置预约上下午时间
			setTimeArea() {
				let map = new Map()
				// 遍历医生号源数量，得到当前坐诊类型的时间是上午，下午，晚上
				for (var i = 0; i < this.listScheduling.length; i++) {
					if (this.listScheduling[i].scheduleDate == this.startDate) {
						map.set(this.listScheduling[i].sitType, this.listScheduling[i])
					}
				}
				this.listTimeArea = []
				// 将当前坐诊类型添加到listTimeArea数组中，
				map.forEach((v, k) => {
					listSitType.forEach(item => {
						if (k == item.type) {
							this.listTimeArea.push({
								name: item.name,
								type: item.type,
								item: v
							})
						}
					})
				})
				// 默认选择第一个上下午标签的type
				if (this.listTimeArea.length > 0) {
					this.currentSitType = this.listTimeArea[this.currentTabs].type + ""
					this.currentScheduling = this.listTimeArea[this.currentTabs].item
				}
			},
			// 设置预约具体时间，查看号源数量
			setTimeAreaNum() {

				let that = this;
				// 点击后得到号源接口opt_0006
				schedulingAreaTime({
					schNo: this.currentScheduling.schNo
				}).then(res => {
					let map = new Map();
					res.forEach(item => {
						if (item.sitType == this.currentSitType) {
							let obj = map.get(item.beginTime)
							if (obj) {
								map.set(item.beginTime, obj + 1)
							} else {
								map.set(item.beginTime, 1)
							}
						}
					})
					that.listTimeAreaNum = []
					map.forEach((v, k) => {
						for (var i = 0; i < res.length; i++) {
							let start = res[i].beginTime.split(' ')[1];
							let end = res[i].endTime.split(' ')[1];
							let regSortNo = res[i].regSortNo;
							if (k == res[i].beginTime) {
								let obj = {
									...res[i]
								};
								let date = new Date()
								let startDate = new Date(res[i].endTime)
								obj.past = false; //是否已经过号
								if (date >= startDate) {
									obj.past = true
								}
								obj.area = start + "-" + end;
								obj.start = start;
								obj.num = v;
								obj.totalMoney = this.currentScheduling.totalMoney;
								obj.active = false;
								that.listTimeAreaNum.push(obj)
								break;
							}
						}
					})
				})
			},
			// 根据选中的tabs得到具体是什么类型
			getDetailSitType() {
				for (var i = 0; i < this.listTimeArea.length; i++) {
					if (i == this.currentTabs) {
						for (var j = 0; j < listSitType.length; j++) {
							if (listSitType[j].name == this.listTimeArea[i].name) {
								return listSitType[j].type
							}
						}
					}
				}
			},
			// 预约之前查询是否已经预约，如果已经预约是否取消重新预约
			patientHadReserve() {
				if (this.currentItem) {
					this.reserveRegisterData = {
						patId: this.userInfo.patId,
						schNo: this.currentItem.schNo,
						schId: this.currentItem.schId,
						reserveSortNo: this.currentItem.regSortNo,
						deptCode: this.doctorItem.deptCode,
						doctorCode: this.doctorItem.code,
						timeRegion: this.currentItem.area,
						reserveDate: this.currentItem.scheduleDate,
						regFee: this.currentScheduling.registerMoney,
						medicalFee: this.doctorItem.diagnosisMoney,
						sitType: this.getDetailSitType()
					}
					doctorPatientHadReserve({
						queryType: 0,
						idType: 1,
						idValue: this.userInfo.patId,
						beginDate: this.currentScheduling.scheduleDate,
						endDate: this.currentScheduling.scheduleDate
					}).then(res => {
						console.log(res)
						res = res || []
						if (res.length > 0) {
							let item = res[0]
							// 如果有未支付的，则则显示
							this.reserveRegisterData = {
								patId: item.patId,
								schNo: item.schNo,
								schId: item.schId,
								reserveSortNo: item.regSortNo,
								deptCode: item.deptCode,
								doctorCode: item.code,
								timeRegion: item.area,
								reserveDate: item.scheduleDate,
								regFee: item.registerMoney,
								medicalFee: item.diagnosisMoney,
								sitType: this.getDetailSitType()
							}
							this.showDialog = true;
						} else {
							// 预约在下一个页面
							this.toPage()
						}
					})
				} else {
					this.$u.toast('请选择预约时间')
				}

			},
			confirm() {
				this.toPage()
				this.showDialog = false;
			},
			close() {
				this.reserveCancel()
				this.showDialog = false;
			},
			reserveCancel() {
				doctorReserveCancel({
					patId: this.userInfo.patId,
					reserveId: this.hadReserveItem.regId,
				}).then(res => {
					// 直接跳转到下一个页面即可
					this.toPage()
				})
			},
			toPage() {
				// 查询当前是否已经有预约当前医生，并提示
				let obj = {
					...this.doctorItem,
					...this.currentItem
				}
				uni.setStorageSync("currentItem", obj)
				uni.navigateTo({
					url: '/pages/Introduce/patientRegister?code=' + this.doctorItem.code
				})
			},
			handleShowAll() {
				console.log(this.showAll)
				this.showAll = !this.showAll
			},
			handleLikesIsLike() {
				let num = this.isLikes ? -1 : 1
				// 点击关注当前医生,同时后端会增加医生被关注数
				doctorLikesAdd({
					doctorId: this.doctorItem.id,
					patId: this.userInfo.patId,
					doctorCode: this.doctorItem.code,
					num: num,
					type: 1,
					typeName: '医生'
				}).then(res => {
					this.initDoctor()
					this.initDoctorLike()
				})
			},
			handleShare() {
				this.erweimaVal = window.location.href
				this.show = true;
			},
		}
	}
</script>
<style scoped>
	.doctor-bg {
		background-image: url("/static/images/imgs/doctor-page-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.erweima {
		background-image: url("/static/images/imgs/bg_doctor_erweima.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 450px;
		background-color: transparent;

		.head-img {
			padding-top: 130px;
		}
	}

	::v-deep .u-mode-center-box {
		background-color: transparent;
	}

	.border-bottom {
		border-bottom: 1px solid rgb(216, 225, 239);
		padding-bottom: 10px;
	}

	.img {
		width: 70px;
		height: 70px;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.shanchang {
		color: #35A6AF;
		white-space: nowrap;
		margin: 0 10px 0 0;
		font-size: 12px;
	}

	.doctor-name {
		font-size: 25px;
		font-weight: bold;
		color: #35A6AF;
	}

	.title {

		padding: 5px;
		margin: 5px 0;
	}

	.title-border {
		padding: 0 5px;
		border-left: 3px solid blue;
	}

	.shanchangcontent {
		font-size: 12px;
		max-height: 35px;
		overflow: hidden;
		transition: max-height 0.5s ease-out;
		position: relative;
		/* line-height: 1.5; */
		text-align: justify;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}


	.shangchang-panel {
		position: relative;

		.specialty {

			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 12px;
			color: #666666;
			line-height: 18px;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}

	.shanchang-open {
		position: absolute;
		right: 0;
		bottom: -1px;
		color: #35A6AF;
		font-size: 12px;
		line-height: 18px;
		background: linear-gradient(to right, transparent, rgb(233, 253, 255) 50%);
		padding-left: 5ch;
	}

	.show-all {
		font-size: 12px;
		max-height: none;
		/* 或设置一个足够大的值，如1000px */
	}

	.service-num {
		color: #35A6AF;
	}

	.btn-time {
		border: 1px solid gray;
	}

	.active {
		/* border: none; */
		border: 1px solid blue;
		border-radius: 10rpx;
		padding: 2rpx;
		background-color: aqua;
	}

	.no-num {
		background-color: rgb(244, 242, 248);
		border-radius: 10rpx;
		padding: 2rpx;
	}

	.have-num {
		border: 1px solid gray;
		border-radius: 10rpx;
		padding: 2rpx;
	}

	.btn-register {
		width: 60%;
		border-radius: 45rpx;
		margin: 15rpx;
		background-color: rgb(112, 222, 230);
	}

	.time-area-num {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.tabs-doctor {
		display: flex;

		.tab {
			background-color: rgb(236, 249, 251);
			padding: 5px 10px;
			margin: 5px 0;
			margin-right: 20px;
			border-radius: 16rpx;


			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 11px;
			color: #666666;
			line-height: 11px;
			text-align: left;
			font-style: normal;
			text-transform: none;

		}
	}
</style>